


How to Mimic 4chan Posts Without Just Taking Screenshots of 4chan

by Anonymous



Category: No Fandom
Genre: 4chan, Fanwork Research & Reference Guides, Imageboards, chan culture-typical use of homophobic slurs
Language: English
Status: Completed
Published: 2020-02-11
Updated: 2020-02-11
Packaged: 2021-02-28 03:20:19
Rating: Mature
Warnings: Creator Chose Not To Use Archive Warnings
Chapters: 2
Words: 1,075
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/22666900
Author URL: https://archiveofourown.org/
Summary: Have you ever dreamed of writing a fic where the characters primarily communicate through imageboard? This is the skin for you.
Comments: 2
Kudos: 40
Collections: A Guide to Coding and Fanworks, Fanfic Anonymous, Fanfiction Reference Works





	1. Live Preview

**Author's Note:**

> Since this is a live preview of a work skin, please have the "Show Creator's Style" option turned on.

Here is the live preview. All other text in the fic is not affected by the work skin, so you can mix imageboard posts with prose if you want to.

  


File: 0967486346985.jpg (206 KB,800x335)

☐ Serious question you guys Anonymous 02/10/2020(Mon)21:50:02 No. 56680552 [Reply] ▶

>>56680555 >>56682270 >>56682289 >>56682291

> >be me  
>  >stan her  
>  >start collecting her panties and replacing them with brand new pairs instead of washing them  
> 
> 
> am i a pedofag? does anyone else do this?

5 replies and 1 image omitted. Click here to view.  


>>

☐ Anonymous 02/10/2020(Mon)21:55:02 No. 56680555 [Reply] ▶

>>56681542

File: frepe.png (206 KB,443x335)

> >>56680552 (OP)  
>  >stan her  
>  How the hell do you get her panties if you're just a stan, anon?

>>

☐ Anonymous 02/10/2020(Mon)22:16:41 No. 56680567 [Reply] ▶

File: 67857863950.png (206 KB,443x335)

> nah bro youre not a pedofag i do that with my baby brother. he hasn't suspected a thing. my boyfriend always questions why i have teenage-sized briefs in a box under my bed though.

>>

☐ Anonymous 02/10/2020(Mon)22:20:22 No. 56681540 [Reply] ▶

> why stan acerola when you can STAN LOONA

>>

☐ Anonymous 02/10/2020(Mon)22:31:18 No. 56681542 [Reply] ▶

> >>56680555  
>  it's none of your business...

>>

☐ Anonymous 02/10/2020(Mon)22:32:01 No. 56681549 [Reply] ▶

File: disapoint.png (206 KB,443x335)

> Even if you weren't a pedo, you're asking a board full of incest-obsessed newfags about ethics.  
>  >>>/adv/

**Notes for the Chapter:**

> BIG HUGE TREMENDOUS thanks to [lovey](https://archiveofourown.org/users/yails/pseuds/loves) for contributing text + the pepe edit. All other images were either taken from the /vp/ booru or drawn by me...


	2. Base CSS Style

**Summary for the Chapter:**

> The CSS that makes it all possible, if you want to try it out for yourself.

### CSS

First, you will have to go to "My Work Skins" from your dashboard, and then click the button saying "[Create a New Skin](http://archiveofourown.org/skins/new?skin_type=WorkSkin)" (or, if you are adding this to an already-existing skin, edit that skin instead.)

Making sure that you are editing a work skin and not a site skin, copy and paste the following into the CSS field:
    
    
    #workskin .fourchan {
      background-color: #ffe;
      color: maroon;
      font-family: sans-serif;
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
      padding: 5px;
      font-size: 10pt;
      display: block;
    }
    
    #workskin .fourchan a {
      color: #00e;
      text-decoration: none;
      border-bottom: none;
    }
    
    #workskin .fourchan p {
      line-height: 1.2em;
      display: inline;
    }
    
    #workskin .fourchan blockquote {
      margin: auto;
      border: none;
    }
    
    #workskin .fourchan div {
      display: block;
    }
    
    #workskin .fourchan a:hover {
      color: red !important;
    }
    
    #workskin .fourchan .thread {
      padding-bottom: 1em;
    }
    
    #workskin .fourchan .post {
      margin: 4px 0;
    }
    
    #workskin .fourchan div.op {
      display: inline;
    }
    
    #workskin .fourchan .reply {
      background-color: #f0e0d6;
      border: 1px solid #d9bfb7;
      border-left: none;
      border-top: none;
      display: table;
      padding: 2px;
    }
    
    #workskin .fourchan .button {
      cursor: pointer;
      margin-bottom: -4px;
    }
    
    #workskin .fourchan img.button {
      width: 18px;
      height: 18px;
    }
    
    #workskin .fourchan .button.hideButton {
      float: left;
      margin-right: 5px;
      margin-top: -1px;
    }
    
    #workskin .fourchan .button.showButton {
      margin-right: 3px;
      margin-left: 2px;
    }
    
    #workskin .fourchan .file {
      display: block;
      white-space: nowrap;
    }
    
    #workskin .fourchan .thumb {
      float: left;
      margin-left: 20px;
      margin-right: 20px;
      margin-top: 3px;
      margin-bottom: 5px;
    }
    
    #workskin .fourchan .opthumb img {
      max-width: 250px;
      max-height: 250px;
      width: auto;
      height: auto;
    }
    
    #workskin .fourchan .replythumb img {
      max-width: 125px;
      max-height: 125px;
      width: auto;
      height: auto;
    }
    
    #workskin .fourchan .info {
      display: block;
      width: 100%;
    }
    
    #workskin .fourchan .info span.subject {
      color: #cc1105;
      font-weight: 700;
    }
    
    #workskin .fourchan span.name {
      color: #117743;
      font-weight: 700;
    }
    
    #workskin .fourchan .name.capcode {
      color: purple !important;
    }
    
    #workskin .fourchan span.num a {
      text-decoration: none;
      color: maroon;
    }
    
    #workskin .fourchan .postmenu {
      color: #000080 !important;
    }
    
    #workskin .fourchan a.quotelink {
      color: navy !important;
      text-decoration: underline !important;
    }
    
    #workskin .fourchan a.quotelink:hover {
      color: red !important;
    }
    
    #workskin .fourchan .backlink {
      font-size: 0.8em !important;
      display: inline;
      padding: 0;
      padding-left: 5px;
    }
    
    #workskin .fourchan span.summary {
      color: #707070;
      margin-top: 10px;
    }
    
    #workskin .fourchan div.sideArrows {
      color: #e0bfb7;
      float: left;
      margin-right: 2px;
      margin-top: 0;
      margin-left: 2px;
    }
    
    #workskin .fourchan blockquote>span.quote,
    #workskin span.quote {
      color: #789922;
    }
    

And that's the work skin! If you want to simulate a blue board, you can change the colors accordingly. Now, you are ready to apply this skin to your work and insert the HTML code.

### HTML template

First, we have the wrapper for 4chan posts to begin with. You can post multiple threads as well by having multiple instances of the "thread" class.
    
    
    <div class="fourchan">
    	<div class="thread">
    

**OP's post:**
    
    
    		<div class="post op">
    			<img class="button hideButton" src="https://discordjs.moe/nZJ4RyXhgN.png" />
    			<div class="file">
    				File: <a rel="nofollow">FILENAME.jpg</a> (206 KB,443x335)
    			</div>
    			<div class="thumb opthumb">
    				<img src="OP is always required to post an image. Image link goes here" />
    			</div>
    			<div class="info">
    				☐ 
    				<span class="subject">SUBJECT, IF YOU WANT ONE</span> 
    				<span class="name">Anonymous</span>

If you make the class here both "name" and "capcode", you can pretend to be a moderator.
    
    
    				<span>MONTH/DAY/YEAR(DAY OF WEEK)HOUR:MINUTE:SECOND</span>
    				<span class="num">
    					<a rel="nofollow">No.</a> <a rel="nofollow">POST NUMBER</a>
    				</span>  
    				<span>[<a rel="nofollow">Reply</a>]</span> 
    				<a class="postmenu" rel="nofollow">▶</a> 
    				<div class="backlink">
    					<a class="quotelink" rel="nofollow">>>REPLY NUMBER</a> <a class="quotelink" rel="nofollow">>>ANOTHER REPLY NUMBER</a> 
    				</div>
    
    			</div>

 **OP's message text** :  
(Note: Do not use <p> elements inside message text. Because AO3 will likely insert a gazillion paragraph elements when you edit your work, I've set the CSS to display paragraphs as inline. Only use <br /> to space your lines.
    
    
    			<blockquote class="message"> 
    				
    				<span class="quote">>GREENTEXT GOES HERE</span><br />
    			        REGULAR TEXT GOES HERE
    				
    			</blockquote>
    			<span class="summary"><img class="button showButton" src="https://discordjs.moe/gi84HegIO1.png" /> X replies and Y image omitted. <a rel="nofollow">Click here</a> to view.</span>
    		</div>
    

You can repeat **reply** elements as many times as you want to.
    
    
    		<div class="container"> 
    			<div class="sideArrows">>></div>
    			<div class="post reply">
    				<div class="info">
    					☐ 
    					<span class="name">Anonymous</span> 
    					<span>##/##/###(WEEKDAY)##:##:##</span> 
    					<span class="num">
    						<a rel="nofollow">No.</a> <a rel="nofollow">POST NUMBER</a>
    					</span>  
    					<span>[<a rel="nofollow">Reply</a>]</span> 
    					<a class="postmenu" rel="nofollow">▶</a>
    					<div class="backlink">
    						<a class="quotelink" rel="nofollow">>>REPLY, IF YOU WANT ONE</a>
    					</div>
    
    				</div>

If you don't want the reply to have an image, remove everything inside the "file" and "thumb replythumb" divs.
    
    
    				<div class="file">
    					File: <a rel="nofollow">FILENAME.png</a> (206 KB,443x335)
    				</div>
    				<div class="thumb replythumb">
    					<img src="FILE SOURCE" />
    				</div>
    				<blockquote>
    					<a class="quotelink" rel="nofollow">>>POST NUMBER BEING REPLIED TO (OP)</a><br />
    					<span class="quote">>QUOTED TEXT</span><br />
    					REGULAR TEXT
    				</blockquote>
    			</div>
    		</div>
    	</div>
    </div>
    

Something that I've noticed is that AO3's HTML editor will likely remove a lot of spaces or add unnecessary line breaks to your code after you've copied and pasted it. Make sure to save and preview your work before publishing!


End file.
